<template>
  <section>
    <el-row v-if="pageKey.key === 'key'">
      <el-input size="mini" v-model="pageKey.val" placeholder="请输入"></el-input>
    </el-row>
    <el-select v-else size="mini" v-model="pageKey.val" @change="changeEvent" clearable>
      <el-row v-if="pageKey.key === 'goodsTypeId'">
        <el-option v-for="goodsType in goodsTypes" :key="goodsType.id" :value="goodsType.id" :label="goodsType.name"/>
      </el-row>
      <el-row v-else-if="pageKey.key === 'goodsTypeCode'">
        <el-option v-for="goodsType in goodsTypes" :key="goodsType.id" :value="goodsType.code" :label="goodsType.code">
          <span>{{goodsType.name}}</span>
          <span>{{goodsType.code}}</span>
        </el-option>
      </el-row>
      <el-row v-else-if="pageKey.key === 'departmentId'">
        <el-option v-for="department in departmentList" :key="department.id" :value="department.id" :label="department.name"></el-option>
      </el-row>
      <el-row v-else-if="pageKey.key === 'departmentCode'">
        <el-option v-for="department in departmentList" :key="department.id" :value="department.code" >
          <span>{{department.name}}</span>
          <span>{{department.code}}</span>
        </el-option>
      </el-row>
    </el-select>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "pageKeys",
    props:['pageKey'],
    data(){
      return {
        goodsTypes:null,
        departmentList:[],
      }
    },
    watch:{
    },
    created(){
      this.getGoodsTypeList()
      this.getDepartmentList()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      saveSetBtn(){
        console.log(this.ad)
        this.$emit('confirm',{id:this.ad.id,config:JSON.stringify(this.ad.config)})
      },
      addBtn(){
        this.ad.config.detail.push({})
      },
      getGoodsTypeList(){
        this.fetch({name:"getMallGoodsTypeList"})
          .then(res=>{
            console.log(res)
            this.goodsTypes=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDepartmentList(){
        this.fetch({name:"getCompanyList"})
          .then(res=>{
            console.log(res)
            res.forEach(r=>{
              this.fetch({name:"getDepartmentList",data:{companyId:r.id}})
                .then(res2=>{
                  console.log(res2)
                  res2.forEach(rr=>{
                    this.departmentList.push(rr)
                  })
                })
                .catch(err=>{
                  console.log(err)
                  errHandler.handle(this,err)
                })
            })
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getImgUrl(data, row) {
        console.log('获取图片————————————————', data)
        if(row.adImg === undefined){
          Vue.set(row,'adImg',data[0].url)
          return
        }
        row.adImg = data[0].url
      },
      removeBtn(scope){
        this.ad.config.detail.splice(scope.$index,1)
      },
      upBtn(scope){
        this.ad.config.detail.splice(scope.$index,1)
        this.ad.config.detail.splice(scope.$index-1,0,scope.row)
      },
      downBtn(scope){
        this.ad.config.detail.splice(scope.$index,1)
        this.ad.config.detail.splice(scope.$index+1,0,scope.row)
      },
      changeEvent(e){
        console.log(this.pageKey.key)
        let tmp={}
        tmp[this.pageKey.key]=e
        this.$emit('change',tmp)
        console.log('改变了值——————————',e)
      }
    }
    }
</script>

<style scoped>

</style>
